<template>
  <div class="app-container brand-account">
    <div class="table-list">
      <div class="list-top">
        <Title :title="'账号设置'" :is-show="true" :total="list.total" style="margin: 24px 0;flex: 1" />
        <div class="btn-right">
          <import-button
            v-if="isBrandAdmin() || hasRouteAuth('brand:accountCodeList:import')"
            :import-api="importApi"
            :get-list="initData"
            class="btn-right-item"/>
        </div>
      </div>
      <el-row>
        <el-table
          v-loading="listLoading"
          v-if="list.items.length > 0"
          :data="list.items"
          element-loading-text="加载中..."
          header-cell-class-name="order-data-header-cell"
          empty-text="暂无数据"
          hightlight-current-row>
          <el-table-column type="index" width="40" fixed="left"/>
          <el-table-column align="left" label="账号" fixed="left">
            <template slot-scope="scope">
              <el-tooltip v-if="scope.row.resource" class="item" placement="top" effect="dark">
                <div slot="content" style="max-width: 200px;">{{ scope.row.resource }}</div>
                <div class="resource-name ellipsisOne">
                  {{ scope.row.resource }}
                </div>
              </el-tooltip>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="ID/链接">
            <template slot-scope="scope">
              {{ scope.row.code || '--' }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="所属平台">
            <template slot-scope="scope">
              {{ scope.row.platForm || '--' }}
            </template>
          </el-table-column>
          <!-- v2.0.2 把账号归属改成经营体 time: 2020-05-29 -->
          <!-- v2.1.2 把经营体改成账号归属 time: 2020-07-13 -->
          <el-table-column align="left" label="账号归属">
            <template slot-scope="scope">
              {{ scope.row.accountBelong || '--' }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="所属部门">
            <template slot-scope="scope">
              {{ scope.row.deptName || '--' }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="账号运营人">
            <template slot-scope="scope">
              {{ scope.row.accountOperation || '--' }}
            </template>
          </el-table-column>
        </el-table>
        <empty-placeholder v-else style="margin-bottom: 24px" />
      </el-row>
      <el-row type="flex" justify="end" class="pagination-area">
        <el-pagination
          v-show="params.total > 0"
          :current-page="params.page"
          :page-size="params.perPage"
          :total="params.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          layout="total, prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
    </div>
  </div>
</template>

<script>
import ImportButton from '@/components/Brand/importBtn';
import { getAccountList } from '@/api/brand';
import { isBrandAdmin, hasRouteAuth } from '@/utils/permission';
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';

export default {
  components: {
    ImportButton,
    Title,
    EmptyPlaceholder
  },
  data() {
    return {
      list: {},
      listLoading: true,
      importApi: '/admin/brand/account/import',
      params: {
        page: 1,
        perPage: 20,
        total: 0
      }
    };
  },
  created() {
    this.initData();
  },
  methods: {
    isBrandAdmin,
    hasRouteAuth,
    initData(toPage = 1) {
      this.params.page = toPage;
      this.listLoading = true;
      getAccountList(this.params).then(res => {
        this.list = res.data;
        this.params.total = res.data.total;
        this.listLoading = false;
      }, result => {
        this.listLoading = false;
      }).catch(e => {
        console.error(e);
      });
    },
    handleSizeChange(val) {
      this.params.perPage = val;
      this.initData();
    },
    handleCurrentChange(page) {
      this.initData(page);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
  .brand-account {
    margin: 24px;
    // border:1px solid #eee;
    box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
    border-radius:12px;
    background-color: #fff;
    padding: 0px 24px 24px 24px;
    .table-list {
      .el-row {
        padding: 0;
        .el-table {
          border-radius: 10px;
          font-size: 14px;
        }
      }
    }
    .el-row {
      padding: 23px 20px 0 0;
      .el-col-8.btn-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 8px 10px 8px 0px;
        line-height: 30px;
      }
    }
  }
.list-top {
  display: flex;
  align-items: center;
  .list-title {
    flex:1;
  }
  .btn-right{
    display: flex;
    .btn {
      margin-left: 10px;
    }
  }
}
</style>
